<template>
  <div>
    <el-descriptions :title="train.trainName" :column="1" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="handleEdit">修改</el-button>
      </template>
      <el-descriptions-item label="培训类型" :colon="isok" width="20px">{{train.des}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="3" border>
      <el-descriptions-item label="培训类型">{{train.trainerCategory}}</el-descriptions-item>
      <el-descriptions-item label="培训预算" label-class-name="my-label" content-class-name="my-content">
        {{train.trainerBudget}}元</el-descriptions-item>
      <el-descriptions-item label="报名截止时间">{{train.lastTime.split("T")[0]}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="培训形式" :labelStyle="{'width':'100px'}">
        <el-tag size="small" :labelStyle="{'width':'200px'}">线上培训</el-tag>
        <el-tag size="small">{{train.status}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="报名人数限制" :contentStyle="{'text-align': 'center'}">
        {{train.enrollNum == -1 ? "不限制"  : train.enrollNum }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions :column="3" border>
      <el-descriptions-item label="开始时间" size="medium">{{train.startTime.split("T")[0]}}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{train.endTime.split("T")[0]}}</el-descriptions-item>
      <el-descriptions-item label="负责人">{{train.managerPerson == null ?"暂未指定" : train.managerPerson  }}
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs type="border-card" style="position: relative;top:20px" @tab-click="handleClick">

      <el-tab-pane label="报名">
        <el-table :data="userTrainList" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" width="180">
          </el-table-column>
          <el-table-column prop="role" label="职位" width="180">
          </el-table-column>
          <el-table-column prop="email" label="部门" width="180">
          </el-table-column>
          <el-table-column prop="enrollForm" label="报名方式" width="180">
          </el-table-column>
          <el-table-column prop="isSuccess" label="状态" width="180">
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.isSuccess == '认证中' " type="success"
                @click="verifyUser(scope.row.scoreId,3)">同意</el-button>
              <el-button size="mini" v-if="scope.row.isSuccess == '认证中' " type="danger"
                @click="verifyUser(scope.row.scoreId,1)">拒绝</el-button>
              <el-button size="mini" type="success" v-if="scope.row.isSuccess == '不通过' " @click="
                         verifyUser(scope.row.scoreId,3)">同意</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather">
        </Pagination>

      </el-tab-pane>

      <!-- 培训进度开始 -->
      <el-tab-pane label="培训进度" style="position:static">
        <userTrainSchedule :trainIdSon="father_Change"></userTrainSchedule>
      </el-tab-pane>
      <!-- 培训进度结束 -->

      <el-tab-pane label="角色管理">
        <userTrainTest :trainIdTest="father_test" :isChange="fatherChange">

        </userTrainTest>
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import userTrainApi from '@/api/user_train'
  import Pagination from '../../components/Pagination'
  import userTrainSchedule from '@/components/user_train_schedule'
  import userTrainTest from '@/components/user_train_test'
  export default {
    data() {
      return {
        trainId: 1,
        train: {},
        isok: true,
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10,
        },
        userTrainList: [], //记录当前课程下所有学员的数组

        UserScoreDto: {
          userScoreId: [], // 记录当前被选中的ids
        },

        father_Change: 0,
        fatherChange: true,
        father_test: ''
      }
    },

    // 注册组件
    components: {
      Pagination,
      userTrainSchedule,
      userTrainTest,
    },

    created() {
      // console.log(this.pageparm.pageSize)
      this.trainId = this.$route.query.trainId;
      this.findTrainById()
      this.findTrainUser(
        this.trainId,
        this.pageparm.currentPage,
        this.pageparm.pageSize
      )
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      //查找当前课程的信息
      findTrainById() {
        userTrainApi
          .findTrainById(this.trainId)
          .then((response) => {
            //把当前的课程id 赋给这个搜索对象

            this.train = response.data
            this.trainSearch.console.log(response)
          })
          .catch((e) => {})
      },
      //获得当前课程的所有学员信息
      findTrainUser(trainId, currentPage, pageSize) {
        userTrainApi
          .findTrainUser(trainId, currentPage, pageSize)
          .then((response) => {
            this.userTrainList = response.data.list
            console.log('获取课程所有学员信息', this.userTrainList)
          })
          .catch((e) => {})
      },
      // 通过事件  更改用户的培训状态
      verifyUser(userScoreId, status) {
        this.UserScoreDto.userScoreId = []
        this.UserScoreDto.userScoreId.push(userScoreId)
        userTrainApi.verifyUser(status, this.UserScoreDto).then((response) => {
          if (response.code == 200) {

            this.$message({
              message: '修改状态成功',
              type: 'success',
            })
            // 调用方法 重新获取值
            this.userTrainList = []
            this.findTrainUser(
              this.trainId,
              this.pageparm.currentPage,
              this.pageparm.pageSize
            )

          }
        })
        console.log(scope)
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      handleClick(tab, event) {
        console.log(tab);
        let id = tab.index
        if (id == 1) {
          this.father_Change = this.trainId
        } else if (id == 2) {
          this.fatherChange = !this.fatherChange
          this.father_test = this.trainId
          console.log("更改");
        } else {}
        // console.log(tab, event)
      },
      handleEdit() {
        this.$confirm('是否编辑?', '提示', {
          confirmButtonText: '编辑',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            name: 'addTrain',
            params: {
              id: this.trainId
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消编辑'
          });
        });
      },

    },
  }

</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .my-label {
    background: #e1f3d8;
  }

  .my-content {
    background: #fde2e2;
  }

</style>
